<template>
	<view>
		<view class="index_line">

		</view>
		<view class="position_recommendation">
			<view class="position_recommendation_head">
				<view class="tit">
					<text style="margin-right: 15rpx;" @click="activeTit(0)"
						:class="actives==false?'activeClass':''">职位</text>
					<text @click="activeTit(1)" :class="actives==true?'activeClass':''">人才</text>
				</view>
				<!-- <text class="more" @click="open">筛选</text> -->
				<view class="mask" v-show="mask==true">
					<view class="mask_box">
						<view class="b_top">
							<text>筛选条件</text>
							<view @click="close">
								<image src="../../static/icon/close.png" mode=""></image>
							</view>
						</view>
						<view class="b_bottom">
							<view class="b_bottom_main dis_flex">
								<text>持有证书</text>
								<view class="b_bottom_list ">
									<picker @change="certChange" :value="certIndex" :range="TJform.certsList"
										range-key="meaning">
										<text>{{TJform.certsList[certIndex].meaning}}</text>
									</picker>
									<image src="../../static/icon/youjiantou.png" mode=""></image>
								</view>
							</view>
							<view class="b_bottom_main dis_flex">
								<text>工作性质</text>
								<view class="b_bottom_list ">
									<picker @change="gzxzChange" :value="gzxzIndex" :range="TJform.type">
										<text>{{TJform.type[gzxzIndex]}}</text>
									</picker>
									<image src="../../static/icon/youjiantou.png" mode="" />
								</view>
							</view>
							<view class="b_bottom_main dis_flex">
								<text>薪资范围</text>
								<view class="b_bottom_list ">
									<picker @change="xzfwChange" :value="xzfwIndex" :range="TJform.xzfw"
										range-key="meaning">
										<text>{{TJform.xzfw[xzfwIndex].meaning}}</text>
									</picker>
									<image src="../../static/icon/youjiantou.png" mode=""></image>
								</view>
							</view>
							<view class="b_bottom_main dis_flex">
								<text>学历</text>
								<view class="b_bottom_list ">
									<picker @change="xlChange" :value="xlIndex" :range="TJform.education"
										range-key="meaning">
										<text>{{TJform.education[xlIndex].meaning}}</text>
									</picker>
									<image src="../../static/icon/youjiantou.png" mode=""></image>
								</view>
							</view>
							<view class="b_bottom_main dis_flex">
								<text>工作年限</text>
								<view class="b_bottom_list ">
									<input class="workyear" type="text" v-model="TJform.background"
										placeholder="请输入工作年限" />
								</view>
							</view>
							<view class="b_bottom_btn">
								<view class="one" @click="resetTJform">
									<image src="../../static/icon/close.png" mode="">
									</image>
									<text>重置</text>
								</view>
								<view class="one two" @click="submitTJform(TJformChange)">
									<image src="../../static/icon/submit.png" mode="">
									</image>
									<text>确认</text>
								</view>
								<!-- 证书选择 -->
								<view class="selectCert">
									<pca-picker ref="pcaPicker" @confirm="getPCA" @fromChild="getChild"></pca-picker>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view v-if="actives==true">
				<talentRec :nums="dataMain"></talentRec>
				<view class="meishuju" v-if="dataMain.length==0">
					<text>{{meishuju}}</text>
				</view>
			</view>
			<view v-if="actives==false">
				<position :nums="dataMainWork"></position>
				<view class="meishuju" v-if="dataMainWork.length==0">
					<text>{{meishuju}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import search from '../search.vue'
	import pcaPicker from '@/components/pcaPicker/pcaPicker.vue'
	import talentRec from "../../pages/zhaopin1/findPerson.vue"
	import position from '../../pages/zhaopin1/positionFindWork.vue'
	export default {
		components: {
			pcaPicker,
			talentRec,
			search,
			position
		},
		data() {
			return {
				meishuju:'',
				searchList: false,
				dataMainWork: [],
				tit: '请选择',
				dataMain: [],
				searchForm: {
					type: "",
					search: '',
					currentPage: 1,
					pageSize: 10,
					userId: ''
				},
				perTj: {
					type: "",
					search: '',
					currentPage: 1,
					pageSize: 10,
					userId: ''
				},
				personData: {
					target: 'findjb',
					targetId: '',
					userId: ''
				},
				visible: true,
				gzxzIndex: 0,
				xzfwIndex: 2,
				certIndex: '0',
				xlIndex: 1,
				personTJ: {
					currentPage: 1,
					pageSize: 10,
					userId: ''
				},
				// 人才关注
				personGZ: {
					pageSize: 10,
					currertPage: 1,
					userId: '',
					type: 'findjb'
				},
				positionGZ: {
					pageSize: 10,
					currertPage: 1,
					userId: '',
					type: 'findrt'
				},

				TJform: {
					certsList: [],
					xzfw: [],
					background: '',
					education: [],
					type: ['兼职', '全职']
				},
				TJformChange: {
					cert: '',
					xzfw: "",
					background: '1',
					education: '',
					type: 'jbpart',
					userId: ''
				},
				actives: true,
				active_img: true,
				activeSXTJ: true, //全职兼职激活
				mask: false,
				sc_imgurl: '../../static/icon/shoucang.png'
			}
		},
		computed: {
			baseid() {
				return this.$store.state.userId
			},
			certList() {
				return this.$store.state.certs
			},
			salaryList() {
				return this.$store.state.salary
			},
			EduList() {
				return this.$store.state.education
			}
		},
		created() {
			this.searchForm.userId = this.baseid
			this.personTJ.userId = this.baseid
			this.personData.userId = this.baseid
			this.personGZ.userId = this.baseid
			this.positionGZ.userId = this.baseid
			this.TJformChange.userId = this.baseid
			this.perTj.userId = this.baseid
			this.initData()
			// 获取证书下拉列表
			this.TJform.certsList = this.certList.person
			// 默认提交证书为建造师
			this.TJformChange.cert = this.certList.person[0].enumValue
			// 薪资范围
			this.TJform.xzfw = this.salaryList.salary
			// 默认提交薪资
			this.TJformChange.xzfw = this.salaryList.salary[0].enumValue
			// 学历列表
			this.TJform.education = this.EduList.education
			// 默认学历
			this.TJformChange.education = this.EduList.education[0].enumValue
			// this.getSearch(this.searchForm)
		},
		methods: {
			initData() {
				this.personguanzhu(this.personGZ)
				// this.positionguanzhu(this.positionGZ)
			},
			// 搜索
			search(form) {
				if (form.type == "请选择") {
					form.type = ''
				}
				this.getSearch(form)
			},
			// 人员搜索
			getSearch(data) {
				if (data.type == 'jbpart') {
					this.$myResquest.recruitJobSearch(data).then(res => {
						if (res.data.code == 200) {
							this.dataMain = res.data.data

						}
					})
				}

			},

			searchLeft() {
				this.searchList = !this.searchList
			},
			// 下拉框点击事件
			search_lsit_click(data) {

				this.tit = data
				if (data == '全职') {
					this.searchForm.type = 'jbfull'
				}
				if (data == '兼职') {
					this.searchForm.type = 'jbpart'
				}
				this.searchList = !this.searchList
			},
			xzfwChange(e) {
				this.xzfwIndex = e.target.value;
				let val = e.target.value
				// 选择的当前值赋给提交的表单
				this.TJformChange.xzfw = this.TJform.xzfw[Number(val)].enumValue
			},
			gzxzChange(e) {
				this.gzxzIndex = e.target.value;
				let val = e.target.value
				// 选择的当前值赋给提交的表单
				if ((this.TJform.type[Number(val)]) == '兼职') {
					this.TJformChange.type = 'jbpart'
				}
				if ((this.TJform.type[Number(val)]) == '全职') {
					this.TJformChange.type = 'jbfull'
				}
			},
			certChange(e) {
				this.certIndex = e.target.value;
				let val = e.target.value
				// 选择的当前值赋给提交的表单
				this.TJformChange.cert = this.TJform.certsList[Number(val)].enumValue
			},
			xlChange(e) {
				this.xlIndex = e.target.value;
				let val = e.target.value
				// 选择的当前值赋给提交的表单
				this.TJformChange.xl = this.TJform.xl[Number(val)]
			},
			// 获取选择传过来的值
			getChild(child) {
				this.TJformChange.cert = child
				this.TJform.cert = child
			},
			showPCA(e) {
				this.$refs.pcaPicker.show();
			},
			getPCA(e) {},
			// 职位推荐、人才推荐收藏方法
			collZWTJ(index) {
				if (this.active_img) {
					this.sc_imgurl = '../../static/icon/shoucang2.png'
					this.active_img = !this.active_img
					uni.showToast({
						title: "关注成功"
					})
				} else {
					this.sc_imgurl = '../../static/icon/shoucang.png'
					this.active_img = !this.active_img
					uni.showToast({
						title: "取消关注"
					})
				}
			},
			// 人才关注
			personguanzhu(data) {
				let that=this
				that.meishuju=''
				that.dataMain=[]
				uni.showLoading({
					title:'加载中...'
				})
				setTimeout(function() {
					that.$myResquest.personFollowList(data).then(res => {
						if (res.data.code == 200) {
							that.dataMain = res.data.data.job.data
							for (var i = 0; i < that.dataMain.length; i++) {
								if (that.dataMain[i].follow == undefined) {
									that.$set(that.dataMain[i], "imgurl", '../../static/icon/shoucang.png')
								}
								if (that.dataMain[i].follow != undefined) {
									that.$set(that.dataMain[i], "imgurl", '../../static/icon/shoucang2.png')
								}
							}
							if(that.dataMain.length==0){
								that.meishuju='暂无数据'
							}
							uni.hideLoading()
						}
					})
				}, 2000);
			},
			// 职位关注
			positionguanzhu(data) {
				let that=this
				that.meishuju=''
				that.dataMainWork=[]
				uni.showLoading({
					title:'加载中...'
				})
				setTimeout(function(){
					that.$myResquest.personFollowList(data).then(res => {
						if (res.data.code == 200) {
							that.dataMainWork = res.data.data.recruit.data
							for (var i = 0; i < that.dataMainWork.length; i++) {
								if (that.dataMainWork[i].follow == undefined) {
									that.$set(that.dataMainWork[i], "imgurl", '../../static/icon/shoucang.png')
								}
								if (that.dataMainWork[i].follow != undefined) {
									that.$set(that.dataMainWork[i], "imgurl", '../../static/icon/shoucang2.png')
								}
							}
							if(that.dataMainWork.length==0){
								that.meishuju='暂无数据'
							}
							uni.hideLoading()
						}
					})
				},1000)
				
			},

			// 最新、推荐
			activeTit(index) {
				if (index == 0) {
					// 调用职位接口
					this.positionguanzhu(this.positionGZ)
					this.actives = false
				}
				if (index == 1) {
					// 调用推荐接口
					this.personguanzhu(this.personGZ)
					this.actives = true
				}
			},
			activeTJ(index) {
				if (index == 0) {
					// 调用最新接口
					this.activeSXTJ = !this.activeSXTJ
				}
				if (index == 1) {
					// 调用推荐接口
					this.activeSXTJ = !this.activeSXTJ
				}
			},
			open() {
				this.mask = !this.mask
			},
			// 关闭遮罩层
			close() {
				this.mask = !this.mask
				this.TJform.cert = '一级建造师'
				this.sheBaoIndex = 0
				this.xzfwIndex = 2
				this.xlIndex = 1
				this.TJform.workYear = ''
			},
			//提交表单
			submitTJform(TJformChange) {
				this.TJformChange.background = this.TJform.background
				this.getSearch(this.TJformChange)
				this.mask = false
			},
			// 表单重置
			// reset
			resetTJform() {
				this.TJform.cert = this.certList.person[0].enumValue
				this.xzfwIndex = 2
				this.xlIndex = 1
				this.TJform.background = ''
				this.TJformChange.xzfw = this.salaryList.salary[0].enumValue
				this.TJformChange.education = this.EduList.education[0].enumValue
				this.getSearch(this.searchForm)
				this.mask = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.workyear {
		width: 200rpx;
	}

	input {
		text-align: right;
	}

	.showpicker {
		height: 100rpx;
	}

	.meishuju {
		width: 750rpx;
		text-align: center;
		height: 250rpx;
		line-height: 250rpx;
	}

	.activeClass {
		width: 70rpx;
		height: 34rpx;
		font-size: 36rpx;
		font-family: PingFang SC, PingFang SC-Bold;
		font-weight: 700;
		text-align: left;
		color: #333333;
	}

	.mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 9999;

		.mask_box {
			margin: 45% auto 0;
			width: 670rpx;
			height: 914rpx;
			background: #f4f4f4;
			border-radius: 10rpx;



			.b_top {
				width: 100%;
				background: aqua;
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;
				background: #ffffff;
				height: 100rpx;
				border-radius: 10rpx;

				text {
					font-size: 36rpx;
					font-family: PingFang SC, PingFang SC-Medium;
					font-weight: 500;
					text-align: left;
					color: #333333;
				}

				view {
					image {
						position: absolute;
						top: 38rpx;
						right: 28rpx;
						width: 30rpx;
						height: 30rpx;
					}
				}
			}

			.b_bottom {
				margin-top: 10rpx;
				background: #ffffff;
				width: 100%;
				border-radius: 10rpx;

				.b_bottom_tit {
					height: 100rpx;
					line-height: 100rpx;
					text-align: center;
				}

				.b_bottom_main {
					height: 80rpx;
					padding: 10rpx 30rpx;
					box-sizing: content-box;


					:first-child {
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC-Medium;
						font-weight: 500;
						text-align: left;
						color: #333333;
					}

					.b_bottom_list {
						display: flex;
						align-items: center;

						text {
							font-size: 28rpx;
							font-family: PingFang SC, PingFang SC-Medium;
							font-weight: 500;
							text-align: right;
							color: #999999;
						}

						image {
							width: 22rpx;
							height: 22rpx;
						}
					}

					.listCert {
						text {
							width: 150px;
							text-overflow: ellipsis;
							white-space: nowrap;
							overflow: hidden;
						}
					}
				}

				.b_bottom_btn {
					display: flex;
					padding: 40px 14px;
					box-sizing: border-box;
					justify-content: space-between;

					.one {
						width: 145px;
						height: 44px;
						background: #f9f9f9;
						border: 1px solid #c0c3c8;
						border-radius: 4px;
						display: flex;
						justify-content: center;
						align-items: center;

						image {
							width: 15px;
							height: 15px;
							margin-right: 12px;
						}

						text {
							font-size: 14px;
							font-family: PingFang SC, PingFang SC-Medium;
							font-weight: 500;
							color: #999999;
						}
					}

					.two {
						background: #5cd1ce;

						text {
							color: #ffffff;
						}
					}
				}
			}
		}
	}

	.position_recommendation {
		padding: 0 12px;
		.position_recommendation_head {
			height: 38px;
			display: flex;
			justify-content: space-between;
			padding: 0 4px;
			box-sizing: border-box;
			align-items: center;

			&:first-child {
				font-size: 14px;
				font-family: PingFang SC, PingFang SC-Medium;
				font-weight: 500;
				text-align: left;
				color: #999999;

				text {
					margin: 0 5px;
				}
			}

			.more {
				font-size: 12px;
				font-family: PingFang SC, PingFang SC-Medium;
				font-weight: 500;
				text-align: center;
				color: #999999;
			}
		}

		.position_recommendation_bottom {
			width: 100%;
			// min-width: 351px;
			height: 119px;
			padding: 0 8px;
			margin-top: 13px;
			box-sizing: border-box;
			background: #ffffff;
			border-radius: 5px;
			box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.1);

			&:first-child {
				margin-top: 0;
			}

			.prb_top {
				height: 40px;

				.prb_top_left {
					image {
						margin-left: 7px;
						width: 23px;
						height: 18px;
					}
				}

				image {
					width: 18px;
					height: 17px;
				}
			}

			.prb_center {
				.tit {
					font-size: 14px;
					font-family: PingFang SC, PingFang SC-Medium;
					font-weight: 500;
					text-align: left;
					color: #f46969;
				}

				.prb_center_left {
					width: 165px;

					text {
						text-align: center;
						min-width: 56px;
						height: 20px;
						margin: 0 2px;
						box-sizing: content-box;
						background: #f2f2f2;
						border-radius: 3px;
					}
				}
			}

			.prb_bottom {
				margin-top: 15px;

				.prb_bottom_left {
					image {
						width: 25px;
						height: 25px;
						margin-right: 7px;

						text {
							font-size: 12px;
							font-family: PingFang SC, PingFang SC-Medium;
							font-weight: 500;
							text-align: left;
							color: #999999;
						}
					}
				}

				text {
					font-size: 12px;
					font-family: PingFang SC, PingFang SC-Medium;
					font-weight: 500;
					text-align: left;
					color: #999999;
				}
			}
		}

	}
</style>
